<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分类页</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="fix-title">
      <div class="back">&lt;</div>
      <span>商品列表</span>
      <div class="text"><a href="search.html">搜索</a></div>
    </div>
    <div class="cate-list-fix">
      <ul id="cate-list">
        <!-- <li class="active"><a href="#">分类1</a></li> -->
        <!-- <li><a href="#">分类2</a></li>
            <li><a href="#">分类3</a></li>
            <li><a href="#">分类4</a></li>
            <li><a href="#">分类5</a></li> -->
      </ul>
    </div>
    <div class="good-list">
      <ul id="food">
        <!-- <li>
                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">
                <h3>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</h3>
                <p>
                    <span>￥200.200</span>
                    <span>+</span>
                </p>
            </li> -->
      </ul>
      <div class="empty">
        <span>空空如也...</span>
      </div>
      <p class="desc">数据正在加载中...</p>
      <p class="desc">我也是有底线的...</p>
    </div>
    <script src="/lib/jquery.js"></script>
    <script src="/lib/axios.js"></script>
    <script>
      $(function () {
        const num = localStorage.getItem("cate_id");
        console.log(num);

        let obj = {
          pageNum: 8,
          pageSize: 26,
        //   cate_id: num,
        };

        $.ajax({
          method: "get",
          url: "http://124.223.14.236:3001/api/goods/cate",
          success: function (res) {
            console.log(res);
            const str = res.data
              .map(function (item) {
                return `
                    <li><a href="">${item.name}</a></li>
                    `;
              })
              .join("");
            document.querySelector("#cate-list").innerHTML = str;
            $("#cate-list li").click(function (e) {
              e.preventDefault();
              $(this).addClass("active").siblings().removeClass("active");
              const idx = $(this).index();
              $(".good-list  .active").eq(idx).show().siblings().hide();
            });
          },
        });

        $.ajax({
          method: "get",
          url: "http://124.223.14.236:3001/api/goods",
          data: obj,
          success: function (res) {
            console.log(res);
            const str = res.data.list
              .map(function (item) {
                return `
                     <li class="active">
                    <img src=${item.img} alt="">
                    <h3>${item.title}</h3>
                    <p>
                        <span>￥${item.price}</span>
                        <span>+</span>
                    </p>
                    </li>
                     `;
              })
              .join("");
            document.getElementById("food").innerHTML = str;
          },
        });

        // 设置请求根路径
        // axios.defaults.baseURL = "http://124.223.14.236:3001/api";
      });
    </script>
  </body>
</html>
